为什么 Font Awesome 图标不显示在我的锚中？

Question

我知道我的问题是否看起来很奇怪，但我在使用 fontawesome 时发现了一个奇怪的行为，通常它总是在我使用它时出现并且我已经阅读了 Docs 和一些答案我在这里读到的并不能解决我的问题

我已经尝试过的来源：

FontAwesome icons not showing. Why?

为什么有些超赞的图标不显示

Font awesome is not showing icon

里面的所有答案都没有解决我的问题。

在样式表中，我使用来自 fontawesome

的外部 link

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

这就是我要展示的内容：

<div id="whatsapp-go"><a target="_blank" href="#"><i class="fab fa-whatsapp"></i></a></div>

<div id="back-to-top"><i class="fas fa-arrow-up"></i></div>

唯一出现的是箭头，但没有 whatsapp 图标

image of the icon doesn't show up

但是当我在另一个元素中使用它时它显示没有任何问题

Icon shows without problem

此处显示图标的代码：

<ul class="footer-follow">
    <li>
        <a class="icon-color btn-floating btn-sm mx-1" target="_blank" href="#"><i class="fa fa-envelope-square fa-2x" alt="#"></i></a>
    </li>
    <li>
        <a class="icon-color btn-floating btn-sm mx-1" target="_blank" href="#"><i class="fab fa-whatsapp fa-2x"></i></a>
    </li>
    <li>
        <a class="icon-color btn-floating btn-sm mx-1" target="_blank" href="#"><i class="fab fa-instagram fa-2x"> </i></a>
    </li>
    <li>
        <a class="icon-color btn-floating btn-sm mx-1" target="_blank" href="#"><i class="fab fa-linkedin fa-2x"></i></a>
    </li>
    <li>
        <a class="icon-color btn-floating btn-sm mx-1" target="_blank" href="#"><i class="fab fa-youtube fa-2x"></i></a>
    </li>
</ul>

有人可以帮助我吗？

CSS 文件：


/*------------------------------------*\
    Back to top
\*------------------------------------*/

#back-to-top {
    display:block;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #0bb89e;
    border-radius:50px;
    color: #FFF;
    z-index: 9999;
    -webkit-transition: 0.2s opacity;
    transition: 0.2s opacity;
    cursor: pointer;
}

#back-to-top:hover {
    opacity: 0.8;
}


/*------------------------------------*\
    Whatsapp-go
\*------------------------------------*/

#whatsapp-go {
    display:block;
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #0bb89e;
    border-radius:50px;
    color: #FFF;
    z-index: 9999;
    -webkit-transition: 0.2s opacity;
    transition: 0.2s opacity;
    cursor: pointer;
}

#whatsapp-go:hover {
  opacity: 0.8;
}

Answer 1

只是 whatsapp 图标是 <a> 标签的子标签，链接设置为与背景相同的绿色：

设置字体颜色为白色。

#whatsapp-go a {
  color: white;
}

为什么 Font Awesome 图标不显示在我的锚中？

Why don't Font Awesome icons show up in my anchor?

html

css

font-awesome-5